<template>
  <div class="bucket-container">
    <div class="bucket-navbar-container">
      <el-menu class="bucket-menu" :router="true" :default-active="menuIndex">
        <el-menu-item-group v-if="flowMenus0">
          <template slot="title">发起培训</template>
          <el-menu-item
            v-for="(item, index) in flowMenus0"
            :key="index"
            :index="item.path"
          >
            <i :class="item.icon" />
            <span slot="title">{{ item.name }}</span>
          </el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group v-if="flowMenus1">
          <template slot="title">题库试卷</template>
          <el-menu-item
            v-for="(item, index) in flowMenus1"
            :key="index"
            :index="item.path"
          >
            <i :class="item.icon" />
            <span slot="title">{{ item.name }}</span>
          </el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group v-if="flowMenus2">
          <template slot="title">考核管理</template>
          <el-menu-item
            v-for="(item, index) in flowMenus2"
            :key="index"
            :index="item.path"
          >
            <i :class="item.icon" />
            <span slot="title">{{ item.name }}</span>
          </el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group>
          <template slot="title">培训及考试</template>
          <el-menu-item
            v-for="(item, index) in flowMenus3"
            :key="index"
            :index="item.path"
          >
            <i :class="item.icon" />
            <span slot="title">{{ item.name }}</span>
          </el-menu-item>
          <el-menu-item index="/train/train_list_participant">
            <i class="el-icon-refresh-left" />
            <span slot="title">我参与的</span>
          </el-menu-item>
          <el-menu-item index="/train/train_list_manage">
            <i class="el-icon-document-copy" />
            <span slot="title">我培训的</span>
          </el-menu-item>
          <el-menu-item index="/train/train_list_paper">
            <i class="el-icon-circle-check" />
            <span slot="title">在线答题</span>
          </el-menu-item>
          <el-menu-item index="/train/train_list_practical">
            <i class="el-icon-upload2" />
            <span slot="title">上传实操</span>
          </el-menu-item>
        </el-menu-item-group>
      </el-menu>
    </div>
    <div class="bucket-main-container">
      <router-view />
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { isInRole } from '@/utils/common.js'
import UglyMap from '@/utils/uglyMap.js'

export default {
  data() {
    return {
      flowMenus0: null,
      flowMenus1: null,
      flowMenus2: null,
      flowMenus3: null,
      menuIndex: '/train/examination_list_question'
    }
  },
  computed: {
    ...mapGetters(['menusMap'])
  },
  mounted() {
    const map = this.listMenus()
    this.flowMenus0 = map.get('发起培训')
    this.flowMenus1 = map.get('题库试卷')
    this.flowMenus2 = map.get('考核管理')
    this.flowMenus3 = map.get('培训及考试')
    this.menuIndex = this.defaultActive()
    console.log(this.$route, 'ororororo', this.menuIndex)
  },
  beforeUpdate() {
    // this.index_()
  },
  methods: {
    isInRole,
    defaultActive() {
      const pathName = this.$route.meta.defaultActive
      return pathName
    },
    index_() {
      this.menuIndex = this.$router.history.current.path
    },
    listMenus() {
      const map = new UglyMap()
      if (this.menusMap) {
        console.log(this.menusMap, 'eeer')
        const flowMenus = this.menusMap.train || []
        flowMenus.forEach((e) => {
          const array = map.computeIfAbsent(e.groups, (k) => [])
          array.push(e)
        })
      }
      return map
    }
  }
}
</script>

<style lang="scss" scoped>
.bucket-menu {
  .el-menu-item {
    .el-badge {
      height: 24px;
      line-height: 24px;
    }
  }
}
</style>
